import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
const OrderIndex = () => {
    const [status, setStatus] = React.useState('all') // 0 已使用 1 未使用
    const [hasMore, setHasMore] = React.useState(false)
    const [page, setPage] = React.useState(1)
    const [list, setList] = React.useState([])
    const statuslist = [
        {
            id: 'all',
            name: '全部'
        },
        {
            id: '1',
            name: '已支付'
        },
        {
            id: '2',
            name: '已入住'
        },
        {
            id: '3',
            name: '已退房'
        },
        {
            id: '4',
            name: '已评价'
        },
        {
            id: '-1',
            name: '售后'
        }
    ]

    React.useEffect(() => {
        getCouponListData();
    }, [])

    React.useEffect(() => {
        onRefresh();
    }, [status])

    // 滚动底部加载
    const loadMore = async () => {
        await sleep(1000)
        getCouponListData();
    }

    // 下拉刷新
    const onRefresh = async () => {
        setPage(1);
        setList([]);
        setHasMore(true);

        await sleep(1000)
        getCouponListData();
    }

    const getCouponListData = async () => {
        let result = await React.HTTP.post('/order/index', {
            page: page,
            busid: React.Business.id,
            status: status
        });

        if (result.code === 0) {
            //没有更多数据
            setHasMore(false);
            return false;
        }
        else {
            //设置分页和列表合并
            setHasMore(true);
            setPage(page + 1);
            setList(list.concat(result.data));
        }
    }

    // 功能组件
    const ButtonList = (item:any) =>
    {
        if(item.status == '1')
        {
            return(
                <React.UI.Button  color='danger' size='small'>申请退款</React.UI.Button>
            )
        }
        else if(item.status == '3')
        {
            return(
                <React.UI.Button  color='warning' size='small'>立即评价</React.UI.Button>
            )
        }
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/order.css" />
            <React.UI.Tabs activeKey={status} onChange={(v: string) => { setStatus(v) }}>
                {
                    statuslist.map((item: any) => {
                        return (
                            <React.UI.Tabs.Tab title={item.name} key={item.id}></React.UI.Tabs.Tab>
                        )
                    })
                }
            </React.UI.Tabs>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="order_list">
                    {
                        list.map((item: any) => {
                            return (
                                <div className="item" key={item.id}>
                                    <div className="item_top">
                                        <p>{item.room.name}</p>
                                        <div className="top_tag">{item.status_text}</div>
                                    </div>
                                    <div className="house">
                                        <div className="item_swipers">
                                            <img src={item.room.thumb_text} alt="" />
                                        </div>
                                        <div className="item_times">
                                            <div>
                                                <div>{item.starttime_text}</div>
                                                <div>{item.startday_text}</div>
                                            </div>
                                            <div>
                                                <div>共{item.day_text}晚</div>
                                                <div className="item_right">
                                                    <img src="/assets/images/right1.png" alt="" />
                                                </div>
                                            </div>
                                            <div>
                                                <div>{item.endtime_text}</div>
                                                <div>{item.endday_text}</div>
                                            </div>
                                            <div>
                                                <div className="item_pay">订单总价</div>
                                                <div className="item_price">￥{item.price}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="item_bar">
                                        <React.UI.Button  color='primary' size='small'>订单详情</React.UI.Button>
                                        {ButtonList(item)}
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>
        </>
    )
}
export default OrderIndex;